<template>
  <div class="down">
    <div class="down_text">
      <div class="top_xiazai">
        <div class="nth_one">
          <img src="../../public/img/down_new/LOGO.png" alt="" srcset="" />
        </div>
        <div class="nth_two">
          <div @click="downClick">立即下载</div>
        </div>
      </div>
      <div class="room_list"> 
           <div class="box_nth">
             <img :src="headPic" alt="" srcset="">
             <span class="room_new">{{nickname}}</span>
             <span class="room_id">房间ID：{{perfectNumber}}</span>
           </div>
           <img src="../../public/img/down_new/HAOSHENGYIN.png" alt="">
           <div class="bottom_boxxiazai" @click="downClick">
                点击进入房间
           </div>
      </div>
      <div class="down_other" v-show="downShow" @click="down_otherClick">
        <img src="../../public/img/down/dian.png" class="down_other_dian" />
        <img src="../../public/img/down/tips1.png" class="down_other_shou" />
        <p>请在浏览器中打开下载</p>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
import qs from "qs";
import { Toast } from "vant";
export default {
  data() {
    return {
      downShow: false,
      downimg: true,
      perfectNumber: "",
      headPic: "",
      nickname: "",
      roomId: '',
    };
  },
  created() {
    if (window.isAndroid) {
      this.downimg = true;
    } else {
      this.downimg = false;
    }
    let url = window.location.href;
    this.roomId = url.split("?")[1].split("=")[1];
    console.log(this.roomId);
    this.$axios
      .post("/chat/chatBaseInfo", qs.stringify({ roomId: this.roomId }))
      .then((res) => {
        // console.log(res.data);
        this.headPic = res.data.result.head_pic;
        this.nickname = res.data.result.room_name;
        this.perfectNumber = res.data.result.perfect_number;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    down_otherClick() {
      this.downShow = false;
    },
    downClick() {
      let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      var ua = window.navigator.userAgent.toLowerCase();
      let isvx = ua.match(/MicroMessenger/i) == "micromessenger";
      console.log(isvx);
      if (isvx) {
        this.downShow = true;
      } else {
        if (isiOS) {
          // Toast("ios暂不可下载");
          // window.location.href = "http://app.xunyinjiaoyou.com/vip/y3dg";
          // window.location.href = "https://testflight.apple.com/join/2FkH5RjX";
          window.location.href = "https://apps.apple.com/cn/app/id1535743948"
        } else {
          window.location.href =
            // "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/app/xunyin.apk";
            "https://img.xunyinjiaoyou.com/static/app/xunyin2.apk";
        }
      }
    },
  },
};
</script>
<style scoped>
.bottom_boxxiazai{
  position: relative;
  top: 40vw;
  width: 88vw;
  height: 12.6vw;
  margin: 0 auto;
  background:linear-gradient(to right,#64D4FF,#3072FF,#3072FF);
  border-radius: 20vw;
  line-height: 12.6vw;
  color: #fff;
  font-size: 4.3vw;
}
.room_id{
  font-size: 3.7vw;
  padding: 1vw 2vw;
  border-radius: 6px;
  background: #ffffff40;
}
.room_new{
  padding: 2.9vw 0;
  font-size: 4.8vw;
}
.box_nth{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.room_list>img{
  position: relative;
  top: 20vw;
  width: 80vw;
}
  .room_list{
    position: relative;
    top: 16.3vw;
  }
.box_nth>img{
  width: 33.1vw;
  height: 33.1vw;
  border-radius: 1vw;
}
.top_xiazai {
  width: 96vw;
  height: 20.8vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.349);
}
.top_xiazai>div{
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_xiazai > div:nth-of-type(1) {
  width: 60vw;
  height: 100%;
}
.top_xiazai > div:nth-of-type(1) > img {
  width: 86%;
}
.top_xiazai > div:nth-of-type(2) {
  width: 30vw;
}
.nth_two{
  width: 29.3vw;
  height: 11.7vw;
  background-color: #0091FF;
  color:#fff;
  font-size: 4.3vw;
  line-height: 11.7vw;
  text-align: center;
  border-radius: 20vw;
}
.down {
  width: 100vw;
  height: 100vh;
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.down_text {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: url("../../public/img/down_new/bgimg.jpg") repeat-y;
  background-size: 100%;
  text-align: center;
}
.down_other {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}
.down_other_dian {
  position: absolute;
  right: 3vw;
  top: 3vw;
}
.down_other_shou {
  position: absolute;
  right: 6vw;
  top: 13vw;
}
.down_other > p {
  position: absolute;
  top: 38vw;
  right: 10vw;
  color: white;
}
</style>